<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>客户管理</legend>
</fieldset>

<div class="layui-form">
    &nbsp;&nbsp;&nbsp;
    <button class="layui-btn layui-btn-sm" onclick="location.href='add.html'">
        <i class="layui-icon">&#xe608;</i> 添加客户
    </button>
    <table class="layui-table">
        <colgroup>
            <col width="150">
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th style="text-align: center;">编号</th>
            <th style="text-align: center;">姓名</th>
            <th style="text-align: center;">年龄</th>
            <th style="text-align: center;">地址</th>
            <th style="text-align: center;">操作</th>
        </tr>
        </thead>
        <tbody id="table">

        </tbody>
    </table>
</div>

</body>
</html>
<script src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['layer'], function(){
        var layer = layui.layer;
    });

    $.ajax({
        url:"/customer",
        type:"get",
        data:{'offset':0,'limit':10},
        success:function(data){
            console.log(data)
            $.each(data,function(i) {
                $.each(data[i], function (j, n) {
                    $("#table").append("<tr>").append("<td style=\"text-align: center;\">"+n.id+"</td>")
                        .append("<td style=\"text-align: center;\">"+n.name+"</td>")
                        .append("<td style=\"text-align: center;\">"+n.age+"</td>")
                        .append("<td style=\"text-align: center;\">"+n.address+"</td>")
                        .append("<td style=\"text-align: center;\">" +
                            "<button class='layui-btn layui-btn-xs' title='编辑客户'  onclick=\"location.href='update.html?id="+n.id+"'\" ><i class='layui-icon'>编辑</i></button>" +
                            "<button class='layui-btn layui-btn-xs' title='删除客户' onclick=\"del("+n.id+",'"+n.name+"')\"><i class='layui-icon'>删除</i></button>" +
                            "</td>")
                        .append("</tr>")
                })
            })
        }
    })

    function del(id,name){
        layer.confirm('确定要删除'+name+'吗？', {
            btn : [ '确定', '取消' ]
        }, function() {
            $.ajax({
                type : 'delete',
                url : '/customer/'+id,
                success : function(data) {
                    window.location.href='/';
                    layer.msg("删除成功");
                }
            });
            layer.close(1);
        });
    }

</script>